//自定义待定模块-监听浏览器尺寸事件
(function(){
    // 定义防抖函数
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        };
    }
    // 创建一个防抖版本的handleResize函数，设置延迟时间为100毫秒
    const debouncedHandleResize = debounce(handleResize, 100);
    // 监听浏览器窗口尺寸
    window.addEventListener('resize',debouncedHandleResize)
    // 定义一个函数来处理窗口大小改变的事件
    function handleResize() {
        
    }
})();

// 自定义模块1 -- 导航栏显示
(function(){
    const bg = document.querySelector('.bg-body-tertiary')
    const sd = document.querySelector('.nav-item .active')
    /* 监测在小窗体下点击按钮 */
    const button = document.querySelector('.navbar-toggler')
    button.addEventListener('click',() => {
        let ariaExpandedValue = button.getAttribute('aria-expanded');
        if(ariaExpandedValue == 'true'){
            bg.style.setProperty('--bs-bg-opacity', '1');
            bg.classList.add('scrolled')
            sd.classList.add('shade')
        }else{
            bg.style.setProperty('--bs-bg-opacity', '0');
            bg.classList.remove('scrolled')
            sd.classList.remove('shade')
        }
    })

    window.addEventListener('scroll',function(){
        let n = document.documentElement.scrollTop
        ariaExpandedValue = button.getAttribute('aria-expanded');
        if(n >= 70){
            // 设置CSS变量 --bs-bg-opacity 的值
            bg.style.setProperty('--bs-bg-opacity', '1');
            bg.classList.add('scrolled')
            sd.classList.add('shade')
        }else{
            if(ariaExpandedValue =='true'){
                return
            }
            bg.style.setProperty('--bs-bg-opacity', '0');
            bg.classList.remove('scrolled')
            sd.classList.remove('shade')
        }
    })
})();


// 自定义模块2 -- 侧边导航栏
(function(){
    const elevator = document.querySelector('.elevator')
    //1.当前页面滚动大于70像素，就显示电梯导航
    //2.给页面添加滚动事件
    window.addEventListener('scroll',function(){
        const n = document.documentElement.scrollTop
        if(n >= 70){
            elevator.style.opacity = 1
        }else{
            elevator.style.opacity = 0
        }
    })
    //点击返回顶部 一键回到顶部
    const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click',function(){
        document.documentElement.scrollTop = 0
    })
})();

//自定义模块2 3
(function(){
    /****第二模块****/
    // 点击页面侧边导航栏可以滑动
    const list = document.querySelector('.elevator_list')
    list.addEventListener('click',function(e){
        //点击了侧边栏键先为其添加字体颜色.active属性
        
        //当点击了list里面的任一a标签经过事件冒泡反馈给了父元素，就获取了其所点击的对象
        //并且自己所点击的对象a标签里需要有自定义属性才可以

        // if(e.target.tagName === ('A' || 'I') && e.target.dataset.name){
        if( e.target.dataset.name ){
            // console.log(11);
            
            //当点击了A标签后，若要将其添加.active属性
            //在过去我们常采用排他思想(先将已有的active属性移除掉，再将所点击的对象为其添加active属性)
            //但此电梯导航栏效果不同，页面打开默认所有a标签都没有active属性
            //此时若再次书写将所有active属性移除的代码，在点击时会有报错提示
            // document.querySelector('.xtx-elevator-list .active').classList.remove('active')
            
            //改变这种情况可以采取为其添加条件判断语句，当有active属性时则移除，没有则不变
            //先获取此类名的对象
            const activing = document.querySelector('.elevator_list .active')
            //当找不到此元素时，返回值是null
            // console.log(activing);
            
            //添加单行判断语句 当activing值为null时，发生隐式转换为 false
            //						      为数值时，发生隐式转化为 true
            if(activing) activing.classList.remove('active')
            
            //为当前元素添加active
            e.target.classList.add('active')
            
            
            
            //当点击了对应的a标签后，页面自动定位到你所点击的模块对应的大盒子位置
            //原理：当点击了对应的a标签后，获取大盒子自身距离页面顶部实际的高度将其赋值给页面滚动的距离
            //如何通过自己所点击的a标签获得大盒子元素？
            //因为我们为a标签添加了自定义属性，其属性是大盒子属性名的后缀，我们可以将自定义属性作为变量，构建桥梁链接其所对应的大盒子
            // console.log(e.target.dataset.name);  a标签的自定义属性
            
            //a标签对应大盒子距离页面顶部的距离
            // document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
            
            const top = document.querySelector(`.${e.target.dataset.name}`).offsetTop
            //让页面滚动到对应位置
            document.documentElement.scrollTop = top - 70
            
            //这样点击会有一点问题，因为返回顶部它没有自定义属性，我们已经把它作为单独模块给独立出来了
            //就已经不需要参与获取自定义属性定位到顶部了，若参与则会报错。改变在条件判断里再加多重判断
            
            /* 若要让滚动条添加滑动效果 */
            // 则在外联css里面添加html{scroll-behavior: smooth;}属性
            //	scroll-behavior: smooth;让滚动条添加丝滑效果
        }
    })

    
    /****第三模块****/
    //  当页面滑动到对应模块位置其侧边导航栏要显示为高亮状态，并移除前一个高亮
    window.addEventListener('scroll',function(){
        // 当页面滚动时先将原有的类全部移除
        const activing = document.querySelector('.elevator_list .active')
        if(activing) activing.classList.remove('active')
        
        /*
            1.因为页面需要不断获取大盒子位置，所以要把所有大盒子都获取过来
            2.开始进行滚动判断
        */
        //·获取四个大盒子
        const pd = document.querySelector('.product')
        // const fz = document.querySelector('.fazhan')
        const fn = document.querySelector('.finish')
        const n = document.documentElement.scrollTop
        if(n >= (pd.offsetTop - 130) && n < (fn.offsetTop - 400)){
            //选择第一个小盒子
            document.querySelector('[data-name=product]').classList.add('active')
        
        }else if(n >= (fn.offsetTop - 600)){
            document.querySelector('[data-name=finish]').classList.add('active')
        }
        // }else if(n >= brand.offsetTop && n < topic.offsetTop){
        //     document.querySelector('[data-name=brand]').classList.add('active')
        
        // }else if(n >= topic.offsetTop){
        //     document.querySelector('[data-name=topic]').classList.add('active')
        
        // }
    })
})();